irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[Extra] ML4W starter.css
362 lines7.5 KBCSS
RawDownloadHistory
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* ML4W - Waybar Style */
3/* Original design from ML4W - Hyprland Starter Waybar */
4
5@define-color backgroundlight #FFFFFF;
6@define-color backgrounddark #FFFFFF;
7@define-color workspacesbackground1 #FFFFFF;
8@define-color workspacesbackground2 #CCCCCC;
9@define-color bordercolor #FFFFFF;
10@define-color textcolor1 #000000;
11@define-color textcolor2 #000000;
12@define-color textcolor3 #FFFFFF;
13@define-color iconcolor #FFFFFF;
14
15/* -----------------------------------------------------
16 * General
17 * ----------------------------------------------------- */
18
19* {
20 font-family: "JetBrainsMono Nerd Font";
21 border: none;
22 border-radius: 4px;
23 font-weight: bold;
24 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
25 font-size: 97%;
26 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
27}
28
29window#waybar {
30 background-color: rgba(0,0,0,0.2);
31 border-bottom: 0px solid #ffffff;
32 /* color: #FFFFFF; */
33 transition-property: background-color;
34 transition-duration: .5s;
35}
36
37/* -----------------------------------------------------
38 * Workspaces & Taskbar
39 * ----------------------------------------------------- */
40
41#taskbar,
42#workspaces {
43 margin: 5px 1px 6px 1px;
44 padding: 0px 1px;
45 border-radius: 15px;
46 border: 0px;
47 font-weight: bold;
48 font-style: normal;
49 color: @textcolor1;
50}
51
52#taskbar button,
53#workspaces button {
54 padding: 0px 5px;
55 margin: 4px 3px;
56 border-radius: 12px;
57 border: 0px;
58 color: @textcolor3;
59 transition: all 0.3s ease-in-out;
60}
61
62#taskbar button.active,
63#workspaces button.active {
64 color: @textcolor1;
65 background: @workspacesbackground2;
66 border-radius: 8px;
67 min-width: 40px;
68 transition: all 0.3s ease-in-out;
69}
70
71#workspaces button:hover {
72 color: @textcolor1;
73 background: @workspacesbackground2;
74 border-radius: 15px;
75}
76
77/* -----------------------------------------------------
78 * Tooltips
79 * ----------------------------------------------------- */
80
81tooltip {
82 border-radius: 10px;
83 background-color: @backgroundlight;
84 opacity:0.8;
85 padding:20px;
86 margin:0px;
87}
88
89tooltip label {
90 color: @textcolor2;
91}
92
93/* -----------------------------------------------------
94 * Window
95 * ----------------------------------------------------- */
96
97#window {
98 background: @backgroundlight;
99 margin: 10px 15px 10px 0px;
100 padding: 2px 10px 0px 10px;
101 border-radius: 8px;
102 color:@textcolor2;
103 font-weight:normal;
104}
105
106window#waybar.empty #window {
107 background-color:transparent;
108}
109
110/* -----------------------------------------------------
111 * Modules
112 * ----------------------------------------------------- */
113
114.modules-left > widget:first-child > #workspaces {
115 margin-left: 0;
116}
117
118.modules-right > widget:last-child > #workspaces {
119 margin-right: 0;
120}
121
122/* -----------------------------------------------------
123 * Custom Quicklinks
124 * ----------------------------------------------------- */
125
126#network,
127#pulseaudio,
128#battery,
129#clock {
130 margin-right: 20px;
131 font-weight: bold;
132 color: @iconcolor;
133 padding: 4px 10px 2px 10px;
134}
135
136#backlight,
137#backlight-slider,
138#battery,
139#bluetooth,
140#clock,
141#cpu,
142#disk,
143#idle_inhibitor,
144#keyboard-state,
145#memory,
146#mode,
147#mpris,
148#network,
149#power-profiles-daemon,
150#pulseaudio,
151#pulseaudio-slider,
152#taskbar,
153#temperature,
154#tray,
155#wireplumber,
156#workspaces,
157#custom-backlight,
158#custom-browser,
159#custom-cava_mviz,
160#custom-cycle_wall,
161#custom-dot_update,
162#custom-file_manager,
163#custom-keybinds,
164#custom-keyboard,
165#custom-light_dark,
166#custom-lock,
167#custom-hint,
168#custom-hypridle,
169#custom-menu,
170#custom-playerctl,
171#custom-power_vertical,
172#custom-power,
173#custom-quit,
174#custom-reboot,
175#custom-settings,
176#custom-spotify,
177#custom-swaync,
178#custom-tty,
179#custom-updater,
180#custom-weather,
181#custom-weather.clearNight,
182#custom-weather.cloudyFoggyDay,
183#custom-weather.cloudyFoggyNight,
184#custom-weather.default,
185#custom-weather.rainyDay,
186#custom-weather.rainyNight,
187#custom-weather.severe,
188#custom-weather.showyIcyDay,
189#custom-weather.snowyIcyNight,
190#custom-weather.sunnyDay {
191 padding-right: 6px;
192 padding-left: 6px;
193 color: @iconcolor;
194}
195
196/* -----------------------------------------------------
197 * Custom Modules
198 * ----------------------------------------------------- */
199
200#custom-menu {
201 background-color: @backgrounddark;
202 color: @textcolor1;
203 border-radius: 10px;
204 margin: 10px 10px 10px 10px;
205 padding-right: 6px;
206 padding-left: 4px;
207}
208
209#custom-power {
210 margin: 2px 10px 0px 0px;
211 padding:0px;
212 color: @iconcolor;
213}
214
215/* -----------------------------------------------------
216 * Hardware Group
217 * ----------------------------------------------------- */
218
219 #disk,#memory,#cpu,#language {
220 margin:0px;
221 padding:0px;
222 color:@iconcolor;
223}
224
225#language {
226 margin-right:10px;
227}
228
229/* -----------------------------------------------------
230 * Clock
231 * ----------------------------------------------------- */
232
233#clock {
234 background-color: @backgrounddark;
235 color: @textcolor1;
236 border-radius: 15px;
237 margin: 10px 2px 10px 0px;
238}
239
240/* -----------------------------------------------------
241 * Pulseaudio
242 * ----------------------------------------------------- */
243
244#pulseaudio {
245 background-color: @backgroundlight;
246 color: @textcolor2;
247 border-radius: 12px;
248 margin: 10px 10px 10px 0px;
249}
250
251#pulseaudio.muted {
252 background-color: @backgrounddark;
253 color: @textcolor1;
254}
255
256/* -----------------------------------------------------
257 * Network
258 * ----------------------------------------------------- */
259
260#network {
261 background-color: @backgroundlight;
262 color: @textcolor2;
263 border-radius: 15px;
264 margin: 10px 10px 10px 0px;
265}
266
267#network.ethernet {
268 background-color: @backgroundlight;
269 color: @textcolor2;
270}
271
272#network.wifi {
273 background-color: @backgroundlight;
274 color: @textcolor2;
275}
276
277/* -----------------------------------------------------
278 * Bluetooth
279 * ----------------------------------------------------- */
280
281 #bluetooth, #bluetooth.on, #bluetooth.connected {
282 background-color: @backgroundlight;
283 color: @textcolor2;
284 border-radius: 15px;
285 margin: 10px 15px 10px 0px;
286}
287
288#bluetooth.off {
289 background-color: transparent;
290 padding: 0px;
291 margin: 0px;
292}
293
294/* -----------------------------------------------------
295 * Battery
296 * ----------------------------------------------------- */
297
298#battery {
299 background-color: @backgroundlight;
300 color: @textcolor2;
301 border-radius: 15px;
302 margin: 10px 15px 10px 0px;
303}
304
305#battery.charging, #battery.plugged {
306 color: @textcolor2;
307 background-color: @backgroundlight;
308}
309
310@keyframes blink {
311 to {
312 background-color: @backgroundlight;
313 color: @textcolor2;
314 }
315}
316
317#battery.critical:not(.charging) {
318 background-color: #f53c3c;
319 color: @textcolor3;
320 animation-name: blink;
321 animation-duration: 0.5s;
322 animation-timing-function: linear;
323 animation-iteration-count: infinite;
324 animation-direction: alternate;
325}
326
327/* -----------------------------------------------------
328 * Tray
329 * ----------------------------------------------------- */
330
331#tray {
332 margin:0px 10px 0px 0px;
333}
334
335#tray > .passive {
336 -gtk-icon-effect: dim;
337}
338
339#tray > .needs-attention {
340 -gtk-icon-effect: highlight;
341 background-color: #eb4d4b;
342}
343
344/* -----------------------------------------------------
345 * Other
346 * ----------------------------------------------------- */
347
348label:focus {
349 background-color: #000000;
350}
351
352#backlight {
353 background-color: #90b1b1;
354}
355
356#network {
357 background-color: #2980b9;
358}
359
360#network.disconnected {
361 background-color: #f53c3c;
362}